<template>
	<view>
		<!-- 顶部组件 -->
		<!-- <u-navbar is-back :background="{ background: 'transparent' }" :border-bottom="false" title="授权登录" title-size="28"></u-navbar> -->
		<view class="content">
			<van-nav-bar title="登录" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" />
			<view class="logo">
				<text class="logoText">闲呗</text>
			</view>
			<view class="text-input">
				<van-cell-group>
					<van-field :value="phone" label="手机号" maxlength="11" placeholder="请输入手机号" :error-message="err"
						:border="true" @blur="telBlur" />
				</van-cell-group>
				<van-cell-group>
					<van-field :value="code" center clearable label="短信验证码" maxlength="6" placeholder="请输入短信验证码"
						:border="true" @blur="codeBlur" use-button-slot>
						<van-button slot="button" size="small" :disabled="disabled" type="primary" @click="sendcode" >
							<span v-show="bool == 'send'" >{{codeBtn}}</span>
							<span v-show="bool == 'time'" >{{time}}s</span>
						</van-button>
					</van-field>
				</van-cell-group>
			</view>
			<view class="btn">
				<van-button type="primary" size="large" @click="codeLogin">验证码登录</van-button>
				<van-button type="primary" size="large" @click="wxLogin">微信授权登录</van-button>
			</view>
		</view>
	</view>
</template>

<script>

import { log } from 'util';
	// const baseurl="http://localhost:8000/"
	// const baseurl="http://192.168.1.2:8000/"
	const baseurl="http://112.74.185.144:8000/"
	// 登录流程
	// 1.用户点击登录按钮，弹出授权弹窗
	// 2.用户确认授权，调用uni.login接口，拿到code
	// 3.使用code调用后端接口,接收后端返回的自定义登录态,如token等
	// 4.登录状态在本地保存起来,用的时候在vuex取用
	// 5.用户信息由后端解密，统一返回，再存入本地
	// 此处简化了流程,没有返回自定义登录态,直接使用openid来判断用户
	// 用户信息也没有做特别处理，获取到之后就进行了存储
	export default {
		data() {
			return {
				uniappName: '名片小程序',
				value: '',
				err: '',
				phone: '',
				code: '',
				disabled: false,
				codeBtn: "发送验证码",
				time:60,
				bool:'send'
			}
		},

		onLoad() {
			uni.login({
				provider: 'weixin',
				success: function(res) {
					console.log(res, 36);
					let code = res.code
					uni.request({
						url: `${baseurl}api/userTable/getOpenid`,
						data: {
							code: code
						},
						success: function(res) {
							console.log(res.data, 45);
							uni.setStorageSync("openid", res.data)
						}
					});
				},
			})
		},

		methods: {
			// 导航栏点击事件
			onClickLeft() {
				uni.showToast({
					title: '点击返回',
					icon: 'none'
				});
			},
			// 电话失焦
			telBlur(e) {
				let phone = e.detail.value;
				this.phone = e.detail.value;
				let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/;
				if (!reg.test(phone)) {
					uni.showToast({
						title: '请输入账号',
						icon: "error",
						duration: 2000
					})
					return false;
				}
				this.phone = phone
			},
			// 验证码
			codeBlur(e) {
				this.code = e.detail.value
			},
			// 发送验证码
			sendcode() {
				var phone = this.phone;

				var that = this;
				if (this.phone == '') {
					uni.showToast({
						title: '账号不能为空',
						icon: "error"
					})
				} else {
					uni.request({
						url: 'http://112.74.185.144:8000/api/userTable/getyzm',
						data: {
							phone: this.phone
						},
						success: res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '验证码已发送',
									icon: "success"
								})
								
								var timers = setInterval(function() {
									that.bool = 'time'
									that.time-=1;
									if (that.time == 0) {
										that.disabled = false,
										that.bool = 'send'
										that.time = 60
										clearInterval(timers)
										return
									} 
									that.disabled = true
									
								}, 1000)
							} else {
								uni.showToast({
									title: '出错了',
								})
							}
						}
					})
				}
			},
			// 验证码登录
			codeLogin() {
				if (this.code == '' || this.phone == ''){
					uni.showToast({
						title: '输入内容为空',
						icon: "error"
					})
				}
				else{
					uni.request({
						url: `${baseurl}api/userTable/codeLogin`,
						data: {
							phone: this.phone,
							code: this.code
						},
						success: function(res) {
							if (res.data.msg = '登录成功') {
								uni.setStorageSync('userTel', res.data.data[0].userTel)
								console.log(res.data.data[0].userTel)
								uni.switchTab({
									url: '/pages/index/index'
								});
							} else if (res.data.msg = '用户创建，登录成功') {
								uni.setStorageSync('userTel', res.data.data[0].userTel)
								uni.switchTab({
									url: '/pages/index/index'
								});
							} else {
								uni.showToast({
									title: '登录失败',
									icon: "error"
								})
							}
						}
					});
				}
			},
			loginchat(tel) {
				// 主动向服务器发送数据
				this.socket.emit('login', {
					loginer: tel,
					toid: '',
					time: +new Date(),
				});
			},
			//授权登录弹窗
			wxLogin() {
				var that = this
				uni.getUserProfile({
					desc: '登录',
					success: (res) => {
						let userName = res.userInfo.nickName
						let userPhoto = res.userInfo.avatarUrl
						uni.request({
							url: `${baseurl}api/userTable/accSelect`,
							data: {
								openid: uni.getStorageSync('openid'),
							},
							success: function(res) {
								console.log(res,209)
								if (res.data.code == 201) {
									uni.setStorageSync('userTel', res.data.data[0].userTel)
									that.loginchat(res.data.data[0].userTel)
									uni.switchTab({
										url: '/pages/index/index'
									});
								} else {
									uni.showModal({
										title: '是否绑定手机号',
										content: '',
										placeholderText: '请输入手机号',
										editable: true,
										success: function(res) {
											if (res.confirm) {
												console.log('用户点击确定');
												let openid = uni.getStorageSync(
													'openid')
												let userTel = res.content
												uni.setStorageSync('userTel', userTel)
												that.loginchat(userTel)
												var accountInfo = uni
													.getAccountInfoSync();
												var appid = accountInfo.miniProgram
													.appId;
												let reg =
													/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/

												if (userTel == '') {
													uni.showToast({
														title: '账号不能为空',
														icon: "error"
													})
												} else if (!reg.test(userTel)) {
													uni.showToast({
														title: '账号格式错误',
														icon: "error"
													})
												} else {
													uni.request({
														url: `${baseurl}api/userTable/wxLogin`,
														data: {
															openid: openid,
															userTel: userTel,
															userName: userName,
															userPhoto: userPhoto
														},
														success: function(
															res) {

															uni.switchTab({
																url: '/pages/index/index'
															});
														}
													});
												}
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}
							}
						});
					},
					fail: (res) => {
						console.log(res)
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.content {}

	.logo {
		.logoText {
			font-family: 隶书;
			font-size: 63px;
			display: flex;
			justify-content: center;
			margin-top: 160rpx;

		}
	}

	.text-input {
		width: 80%;
		margin: 0 auto;
		margin-top: 100rpx;

		.van-field {
			display: flex;
			justify-content: center;
		}

		.van-cell {
			width: 100%;
			border: 1px solid #f2f2f2;
			margin-top: 40rpx;
			border-radius: 15rpx;
		}

		.van-field__label {
			font-size: 17px;
		}
	}

	.btn {
		.van-button--large {
			width: 80%;
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			border-radius: 15rpx;
		}
	}
</style>
